<template>
  <view class="home">
    <view class="fixed-title">Guess you like</view>
    <scroll-view
      scroll-y
      class="scroll-container"
      @scrolltolower="loadMore"
      :refresher-enabled="false"
    >
      <view class="recommend">
        <view class="equipment-list">
          <product-card
            v-for="(item, index) in recommendList"
            :key="item.productId"
            :product="item"
          >
          </product-card>
        </view>
      </view>
      <view class="loading" v-if="loading">Loading...</view>
    </scroll-view>
  </view>
</template>

<script>
import ProductCard from "@/components/ProductCard.vue";
import request from "@/config/request";

export default {
  components: {
    ProductCard,
  },
  data() {
    return {
      recommendList: [],
      loading: false,
    };
  },
  onLoad() {
    this.loadProducts();
  },
  methods: {
    async loadProducts() {
      if (this.loading) return;
      this.loading = true;

      try {
        const data = await request({
          url: "/api/products/random",
          method: "GET",
        });
        this.recommendList = [...this.recommendList, ...data];
      } catch (err) {
        console.error("请求失败：", err);
        uni.showToast({
          title: "网络错误",
          icon: "none",
        });
      } finally {
        this.loading = false;
      }
    },
    loadMore() {
      this.loadProducts();
    },
  },
};
</script>

<style lang="scss">
.home {
  height: calc(100vh - 96rpx);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #fff8e1 0%, #ffffff 100%);
  overflow: hidden;
  box-sizing: border-box;
  /* #ifdef MP-WEIXIN */
  height: 100vh;
  padding-top: calc(var(--status-bar-height) + 20rpx);
  /* #endif */

  .fixed-title {
    padding: 20rpx 30rpx;
    /* #ifdef MP-WEIXIN */
    padding: 40rpx 30rpx 20rpx;
    /* #endif */
    font-size: 32rpx;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .scroll-container {
    flex: 1;
    overflow: hidden;
  }

  .recommend {
    padding: 20rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .equipment-list {
      column-count: 2;
      column-gap: 20rpx;
      margin: 0;
    }
  }

  .loading {
    text-align: center;
    padding: 20rpx;
    color: #999;
    font-size: 24rpx;
  }
}
</style>
